<template>
  <div class="articleDetail">
    <div class="container">
      <div class="header">
        <h1>Spark核心数据集RDD</h1>
        <div class="user">
          <span><i class="el-icon-user-solid"></i> 邙星魂 </span>
          <span><i class="el-icon-timer"></i> 2020/8/27 </span>
          <span><i class="el-icon-price-tag"></i> spark </span>
        </div>
      </div>
      <!-- MarkDown内容显示区 -->
      <mavon-editor
        v-model="articleInfo"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        codeStyle="atom-one-dark"
        :boxShadow="false"
      />
      <!-- 回复 -->
      <div class="reply">
        <p>评论</p>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="3">
            <img class="headImg" src="../assets/header.webp" />
          </el-col>
          <el-col :span="21">
            <mavon-editor
              v-model="replyInfo"
              :subfield="false"
              :defaultOpen="'edit'"
              codeStyle="atom-one-dark"
              :boxShadow="false"
              :editable="isEditable"
              :placeholder="placeholderInfo"
              :toolbars="{
                bold: true, // 粗体
                quote: true, // 引用
                imagelink: true, // 图片链接
                code: true, // code
                alignleft: true, // 左对齐
                aligncenter: true, // 居中
                alignright: true, // 右对齐
                preview: true, // 预览
              }"
            />
          </el-col>
        </el-row>
        <div class="reply-btn">
          <el-button
            v-if="!isEditable"
            type="info"
            @click="$router.push('/login')"
          >
            登录
          </el-button>

          <el-button v-else type="primary" plain>发表评论</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleInfo: "",
      replyInfo: "",
      isEditable: false, // 是否允许回复
      placeholderInfo: "登录后才能发表评论丨支持 Markdown 语法", //回复提示信息
    };
  },
  methods: {
    // 根据titleId 查询帖子
    findArticaleByTitleId(titleId) {
      fetch(`/articleDetail.md`)
        .then((resp) => resp.text())
        .then((data) => (this.articleInfo = data));
    },
  },
  mounted() {
    let titleId = this.$route.params.titleId; // 获取路由传递的参数
    this.findArticaleByTitleId(titleId);
    // 获取登录状态
    let logStatus = window.sessionStorage.getItem("logStatus");
    console.log(logStatus);
    if (logStatus !== null) {
      this.isEditable = true;
      this.placeholderInfo = "优质的评论，可以帮助作者获得更高的权重";
    }
  },
};
</script>
<style scoped>
.articleDetail /deep/ .v-note-wrapper {
  z-index: 2 !important;
}
.articleDetail {
  display: flex;
  justify-content: center;
}
.articleDetail .container {
  width: 60%;
}
.user {
  margin-bottom: 40px;
  color: #666;
}
.user span {
  margin-right: 15px;
}
.reply {
  margin-top: 80px;
}
.reply /deep/ .v-note-wrapper {
  min-height: 180px !important;
}
.reply p {
  font-weight: bold;
  color: #409eff;
  font-size: 20px;
  position: relative;
  top: 13px;
}
.headImg {
  width: 100px;
  border-radius: 100px;
}
.reply-btn {
  margin-top: 15px;
  text-align: right;
}
</style>